<template>
<div class="peopleBox">
  <div>
    <img :src=imgList.bannerImgUrl alt="">
    <div>
      <p>{{ imgList.articleSource }}</p>
      <p>9小时前</p>
    </div>
  </div>
  <van-button @click="alert1" type="info" class="peopleBtn">关注</van-button>
</div>
</template>

<script>
import { Toast } from 'vant';
export default {
name: "peopleShow",
  props:{
    imgList:[String,Object]
  },
  methods:{
    alert1()
    {
      Toast('该功能正在开发');
    }
  }
}
</script>

<style scoped lang="less">
.peopleBox{
  margin-top: 19px;
  display: flex;
  justify-content: space-between;
  >div{
    overflow: hidden;
    img{
      width: 35px;
      height: 35px;
      background-color: rgba(255, 152, 0, 1);
      border-radius: 50%;
      float: left;
      margin-right: 10px;
    }
    >div{
      float: left;
      margin-top: -1px;
      >p{
        margin: 0;
      }
      >p:nth-child(1){
        font-size: 16px;
        text-align: center;
        font-family: PingFangSC-regular;
      }
      >p:nth-child(2){
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-regular;
        color: #ccc;
      }
    }
  }
  .peopleBtn{
    width: 58px;
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    font-family: Arial;
  }
  .van-button__content{
    width: 30px;
  }
}

</style>